<template>
  <div id="app"> 
    <!-- 搜索框模块 -->
    <div class="clearfix" style="margin-bottom:20px;">
      <div style="width:500px;float:left">
        <el-input placeholder="请输入内容" v-model="pageInfo.orgName" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
        </el-input>
      </div>
      <el-button type="primary" style="float:right" @click="dialogAddVisible = true">添加</el-button>
    </div>

    <!-- 院校信息展示模块 -->
    <el-table :data="tableData" borderstyle="width: 100%" border>
      <el-table-column type="index" label="序号" width="80"></el-table-column>
      <el-table-column prop="orgName" label="院校名称" width="120"></el-table-column>
      <el-table-column prop="linkMan" label="联系人" width="100"></el-table-column>
      <el-table-column prop="linkTel" label="联系电话" width="180"></el-table-column>
      <el-table-column prop="areaName" label="所属地区" width="100"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
             <el-tooltip effect="dark" content="修改院校信息" placement="top">
      <el-button type="primary" icon="el-icon-edit" circle @click="editCollege(scope.row)"></el-button>
       </el-tooltip>
       <el-tooltip effect="dark" content="删除院校信息" placement="top">
      <el-button type="danger" icon="el-icon-delete" circle @click="deleteCollege(scope.row)"></el-button>
     </el-tooltip>
     <el-tooltip effect="dark" content="设置工作时间" placement="top">
       <el-button type="warning" icon="el-icon-setting" circle @click="setWorkTime(scope.row)"></el-button>
    </el-tooltip>
      <el-tooltip effect="dark" content="设置课堂时间" placement="top">
       <el-button type="success" icon="el-icon-setting" circle @click="setClassTime(scope.row)"></el-button>
    </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- :pager-count="11" -->
    <el-pagination style="width:560px" :page-size="pageInfo.size" layout="prev, pager, next" :pager-count="11" :total="total" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.page">
    </el-pagination>

    <!-- 添加院校弹出框模块 -->
    <el-dialog title="添加院校" :visible.sync="dialogAddVisible" width="30%">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="院校名称" :label-width="formLabelWidth" prop="orgName">
          <el-input v-model="form.orgName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系人" :label-width="formLabelWidth">
          <el-input v-model="form.linkMan" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="form.linkTel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属区域" :label-width="formLabelWidth">
          <el-select v-model="form.areaName" placeholder="请选择院校区域" style="width:100%">
            <el-option label="河南" value="河南"></el-option>
            <el-option label="北京" value="北京"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button type="primary" @click="addCollege('form')">提交</el-button>
        <el-button @click="dialogAddVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 修改院校弹出框模块 -->
    <el-dialog title="修改院校" :visible.sync="dialogEditVisible" width="30%">
      <el-form :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="院校名称" :label-width="formLabelWidth" prop="orgName">
          <el-input v-model="editForm.orgName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系人" :label-width="formLabelWidth">
          <el-input v-model="editForm.linkMan" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="editForm.linkTel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属区域" :label-width="formLabelWidth">
          <el-select v-model="editForm.areaName" placeholder="请选择院校区域" style="width:100%">
            <el-option label="河南" value="河南"></el-option>
            <el-option label="北京" value="北京"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="editForm.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button type="primary" @click="updateCollege('editForm')">提交</el-button>
        <el-button @click="dialogEditVisible = false">取 消</el-button>
      </div>
    </el-dialog>   
 <!-- 设置院校上班时间弹出框模块 -->
  <el-dialog title="设置院校上班时间" :visible.sync="dialogSetTimeVisible" width="40%" @close="closeWorkForm">
  <el-form :model="workTime.list" ref="setTimeForm" label-width="120px">
   <el-form-item v-for="(item,index) in workTime.list" :label="item.name" :key="index">
    <el-row>
  <el-col :span="11">
      <el-time-picker  v-model="item.startTime" value-format="HH:mm" style="width: 80%;" ></el-time-picker></el-col>
     <el-col :span="2">至</el-col>
     <el-col :span="11">
      <el-time-picker  v-model="item.endTime" value-format="HH:mm" style="width: 80%;" ></el-time-picker></el-col>
   </el-row>
   </el-form-item>
</el-form>
 <div slot="footer" class="dialog-footer" style="text-align:center">
      <el-button type="primary" @click="updateWorkTime()">提交</el-button>   
  </div> 
</el-dialog>
<!--设置课堂时间弹窗-->
<el-dialog title="设置课堂时间" :visible.sync="dialogSetClassVisible" width="40%" @close="closeClassForm">
  <el-form :model="classTime.list" ref="setClassForm" label-width="120px" >
   <el-form-item v-for="(item,index) in classTime.list" :label="item.name" :key="index">
    <el-row>
  <el-col :span="11">
      <el-time-picker v-model="item.startTime" value-format="HH:mm" style="width: 80%;"></el-time-picker></el-col>
     <el-col :span="2">至</el-col>
     <el-col :span="11">
      <el-time-picker v-model="item.endTime" value-format="HH:mm" style="width: 80%;"></el-time-picker></el-col>
   </el-row>
   </el-form-item>
</el-form>
 <div slot="footer" class="dialog-footer" style="text-align:center">
      <el-button type="primary" @click="updateClassTime()">提交</el-button>   
  </div> 
</el-dialog>
  </div>
</template>

<script>
  // import HelloWorld from './components/HelloWorld.vue'

  export default {
    name: 'collegeList',
    data() {
      return {       
        pageInfo: {
          page: 1, //当前页码
          size: 2, //前台默认分页条数
          orgName: ""
        },
        total: 0,
        select: '',
        dialogAddVisible: false, //控制添加弹窗是否显示
        dialogEditVisible: false, //控制修改弹窗是否显示
        dialogSetTimeVisible:false,//控制设置上班时间弹窗是否显示
        dialogSetClassVisible:false,//控制设置课堂时间弹窗是否显示
        form: {
          orgName: '',
          linkMan: '',
          linkTel: '',
          areaName: '',
          address: ''
        },
        //编辑使用的后台查询方法获取的数据，editform必须为空
        editForm: {},
        //设置学期作息时间表单
        termForm: {},
        //添加院校名称的限制规则
        rules: {
          orgName: [{
              required: true,
              message: '请输入院校名称',
              trigger: 'blur'
            },
            {
              max: 50,
              message: '院校名称不能超过50个字符',
              trigger: 'blur'
            }
          ]
        }, 
         //设置上班时间对象
         workTime:{
           orgInfoId:'',
           list: [{
              orderId: 1,
              name: '上午',
              startTime: '',
              endTime: '',              
              orgInfoId:''
            },
            {
              orderId: 2,
              name: '下午',
              startTime: '',
              endTime: '',
              orgInfoId:''
             }
              ]},
              //设置课堂对象
              classTime:{
                orginfoId:'',
                list:[{
              orderId: 1,
              name: '第一节',
              startTime: '',
              endTime: '',
              orginfoId:''
            }, {
              orderId: 2,
              name: '第二节',
              startTime: '',
              endTime: '',
              orginfoId:''
            },
              {
              orderId: 3,
              name: '第三节',
              startTime: '',
              endTime: '',
              orginfoId:''
            },
            {
              orderId: 4,
              name: '第四节',
              startTime: '',
              endTime: '',
              orginfoId:''
            },
            {
              orderId: 5,
              name: '第五节',
              startTime: '',
              endTime: '',
              orginfoId:''
            },
            {
              orderId: 6,
              name: '第六节',
              startTime: '',
              endTime: '',
              orginfoId:''
            },
            {
              orderId: 7,
              name: '第七节',
              startTime: '',
              endTime: '',
              orginfoId:''
            },
            {
              orderId: 8,
              name: '第八节',
              startTime: '',
              endTime: '',
              orginfoId:''
            },
            {
              orderId: 9,
              name: '第九节',
              startTime: '',
              endTime: '',
              orginfoId:''
            },{
              orderId: 10,
              name: '第十节',
              startTime: '',
              endTime: '',
              orginfoId:''
            }]
            },          
        formLabelWidth: '120px',
        //显示院校的列表
        tableData: [],
        //设置上课时间是否为空
         isClassTimeEmpty:false,
        //设置工作时间是否为空
         isWorkTimeEmpty:false
      }
    },
    components: {
      // HelloWorld
    },
    created() {
      this.render(); //渲染数据
    },
    methods: {
      async render() {
        const {
          data: res
        } = await this.$http.post('orginfo/queryall', this.pageInfo) // 获取数据
        this.total = res.data.recordCount;
        //console.log(res)
        if(res.ret !== 0) {
          return this.$message.error(res.msg)
        }
        this.tableData = res.data.resList;
      },
      //增加院校方法
     addCollege(formName) {
        this.$refs[formName].validate(async valid => {
          if(!valid) return
          // 可以发起添加院校的网络请求 
          const {
            data: res
          } = await this.$http.post('orginfo/save', this.form)
          //清空添加面板
          this.form.orgName = "";
          this.form.linkMan = "";
          this.form.linkTel = "";
          this.form.areaName = "";
          this.form.address = "";

          this.$message.success('添加院校成功！')
          // 隐藏添加院校的对话框
          this.dialogAddVisible = false;
          // 重新获取院校列表数据
          this.render()
        })
      },
      //修改院校弹框带数据方法
      async editCollege(scope) {
        this.dialogEditVisible = true;
        //console.log(scope.id);
        const {
          data: res
        } = await this.$http.post('orginfo/findById', {
          id: scope.id
        })
        //抛出异常错误
        if(res.ret !== 0) {
          return this.$message.error(res.msg)
        }
        this.editForm = res.data;
      },
      //更新院校方法
      async updateCollege(form) {
        this.$refs[form].validate(async valid => {
          if(!valid) return
          // 发起修改院校信息的数据请求
          const {
            data: res
          } = await this.$http.post('orginfo/update', this.editForm)
          //抛出异常错误
          if(res.ret !== 0) {
            return this.$message.error(res.msg)
          }
          // 关闭对话框
          this.dialogEditVisible = false;
          // 刷新数据列表
          this.render();
          // 提示修改成功
          this.$message.success('更新院校信息成功！')
        })
      },
      // 根据Id删除对应的院校信息
      async deleteCollege(row) {
        // 弹框询问是否删除数据
        const confirmResult = await this.$confirm(
          '此操作将删除该院校所有信息, 是否继续?',
          '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(err => err)

        // 如果确认删除，则返回值为字符串 confirm
        // 如果取消了删除，则返回值为字符串 cancel
        // console.log(confirmResult)
        if(confirmResult !== 'confirm') {
          return this.$message.info('已取消删除')
        }

        //异步数据库删除
        const {
          data: res
        } = await this.$http.post('orginfo/deleteById', {
          id: row.id
        })
        //抛出异常错误
        if(res.ret !== 0) {
          return this.$message.error(res.msg)
        }

        this.$message.success('删除院校成功！')
        this.render()
      },
      //页面输入页码的处理
      handleSizeChange(val) {
        //console.log(`每页 ${val} 条`);
        //this.pageInfo.page=val;
      },
      //页面更改页码处理函数
      handleCurrentChange(val) {
        //console.log(`当前页: ${val}`);  
        this.pageInfo.page = val;
        //console.log(this.pageInfo.page)
        this.search()
      },
      async search() {
        // 发起模糊查询的数据请求
        const {
          data: res
        } = await this.$http.post('orginfo/findall', this.pageInfo)
        //console.log(res)
        this.total = res.data.recordCount;        
        this.tableData = res.data.resList;
        //抛出异常错误
        if(res.ret !== 0) {
          return this.$message.error(res.msg)
        }
      },
 //打开设置上班时间弹窗
  async setWorkTime(row)
    {
      this.dialogSetTimeVisible=true;     
      //接受院系id
      this.workTime.orginfoId=row.id;    
     // console.log(this.workTime.orginfoId);
      const { data: res } = await this.$http.post('timetable/query',{id:row.id});
      //如果没有设置上下午，默认都为空，重新输入
     //如果设置上下午，查询并显示
     if(res.data.length==2){     
     this.workTime.list=res.data;
      //设置上下午的院校id     
     }
     for(var i=0;i<this.workTime.list.length;i++)
     {
       this.workTime.list[i].orginfoId=row.id;       
     } 
      console.log(this.workTime);
    },
    //更新上班时间
    async updateWorkTime()
    { 
        //设置工作时间是否为空
        this.isWorkTimeEmpty=false;        
      //进行时间非空设置
      for(var i=0;i<this.workTime.list.length;i++)
     {
        if(this.workTime.list[i].startTime==null||this.workTime.list[i].startTime==''||this.workTime.list[i].endTime==null||this.workTime.list[i].endTime=='')
       {
         this.isWorkTimeEmpty=true;     
         break;
       }   
     }
     //空值提示
     if(this.isWorkTimeEmpty)
     {
       this.$message.error("上班时间不能为空！,请补齐时间！");
     }//非空提交
     else{
      const { data: res} = await this.$http.post('timetable/update',this.workTime);
           console.log(res);
          //提示更新是否成功
          if(res.ret!=0)
          {
            this.$message.error("上班时间更新失败:"+res.msg)
          }
          else{
         this.$message.success("上班时间更新成功！"); 
          }
     }
     
    },
    //打开设置班级时间弹窗
     async  setClassTime(row)
    {
      this. dialogSetClassVisible=true;  
      //接受院系id
      this.classTime.orginfoId=row.id;      
      const { data: res } = await this.$http.post('classday/query',{id:row.id});
      console.log(res.data);
     //如果没有设置十节课，默认都为空，重新输入
     //如果设置10节课，查询并显示
     if(res.data.length==10){     
     this.classTime.list=res.data;
      //设置每节课的院校id    
     }
      for(var i=0;i<this.classTime.list.length;i++)
     {
       this.classTime.list[i].orginfoId=row.id;      
     }
    },
     //更新课堂时间
    async updateClassTime()
    { 
       this.isClassTimeEmpty=false;
     //判断是否有空字段
      for(var i=0;i<this.classTime.list.length;i++)
     {
         if(this.classTime.list[i].startTime==''||this.classTime.list[i].endTime==''||this.classTime.list[i].startTime==null||this.classTime.list[i].endTime==null)
       {
         this.isClassTimeEmpty=true; 
         break;                 
       }
     }
     if(this.isClassTimeEmpty)
     {
       this.$message.error("课堂时间不能为空！,请补齐时间！");
     }
     else{
       //后台更新
        const { data: res} = await this.$http.post('classday/update',this.classTime);
          //提示更新是否成功
         // console.log(res);
          if(res.ret!=0)
          {
            this.$message.error("课堂时间更新失败:"+res.msg)
          }
          else{
         this.$message.success("课堂时间更新成功！"); 
          }        
     }        
    },
    //关闭设置上班时间弹窗
    closeWorkForm()
    {
      //this.$refs.setTimeForm.resetFields();      
     for(var i=0;i<this.workTime.list.length;i++)
     {     
       this.workTime.list[i].startTime='';
       this.workTime.list[i].endTime='';
       
     }
    },
    //关闭设置上课时间弹窗
    closeClassForm()
    {
     for(var i=0;i<this.classTime.list.length;i++)
     {     
       this.classTime.list[i].startTime='';
       this.classTime.list[i].endTime='';      
     }    
    }
    }
  }
</script>

<style scoped="scoped">
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  
  .el-select .el-input {
    width: 130px;
  }
  
  .input-with-select {
    width: 500px;
  }
  
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  
  .clearfix {
    *zoom: 1
  }
  
  .clearfix:after {
    display: block;
    content: "";
    height: 0;
    clear: both;
    visibility: hidden;
  }
  
  .el-select .el-input {
    width: 100%;
  }
</style>